<template>
  <div class="shopping-cart">
    <h1>Shopping Cart</h1>
    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product">
        <img :src="product.image" alt="Product Image" />
        <div class="product-details">
          <h2>{{ product.name }}</h2>
          <p>Price: ${{ product.price }}</p>
          <div class="quantity">
            <button @click="decrement(product)">-</button>
            <input type="text" :value="product.quantity" readonly />
            <button @click="increment(product)">+</button>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-summary">
      <h3>Cart Summary</h3>
      <p>Total Items: <span>{{ totalItems }}</span></p>
      <p>Total Price: <span>${{ totalPrice }}</span></p>
      <button class="checkout-btn">Checkout</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const products = reactive([
  { id: 1, name: 'Product 1', price: 50, quantity: 1, image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.8MhRuoSTeanCbROOB1_wRgHaHa?rs=1&pid=ImgDetMain' },
  { id: 2, name: 'Product 2', price: 100, quantity: 1, image: 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8e7fac30aafec84794a117a7619b8db.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080' }
]);

const totalItems = computed(() => products.reduce((sum, product) => sum + product.quantity, 0));
const totalPrice = computed(() => products.reduce((sum, product) => sum + product.price * product.quantity, 0));

function increment(product:any) {
  product.quantity++;
}

function decrement(product:any) {
  if (product.quantity > 1) {
    product.quantity--;
  }
}
</script>

<style scoped>
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-details h2 {
  margin: 0;
}

.product-details p {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

/* 数量调节按钮 */
.quantity {
  display: flex;
  align-items: center;
}

.quantity button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

.quantity button:hover {
  background-color: #45a049;
}

.quantity input {
  width: 40px;
  text-align: center;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
